<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">

      非合同资料名

      <el-input v-model="searchData.nconMarName.value"
                style="width: 80px; margin-right:30px; margin-left:10px" />

                项目<el-select v-model="searchData.projId.value" placeholder="项目" style="width: 120px; margin-right:30px; margin-left:10px">
                  <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.projName"
                        :value="item.id"

                      />
                </el-select>

      资料类型

      <el-select v-model="searchData.nconTypeId.value"
                 placeholder="资料类型"
                 style="width: 120px; margin-right:30px; margin-left:10px">
        <el-option v-for="item in nconTypeList"
                   :key="item.id"
                   :label="item.nconTypeName"
                   :value="item.id" />
      </el-select>

      录入人员
      <el-select v-model="searchData.initUserId.value"
                 placeholder="用户"
                 style="width: 220px; margin-right:30px; margin-left:10px">
        <el-option v-for="item in userList"
                   :key="item.id"
                   :label="item.userName +'---'+item.departName +'---'+item.departRole"
                   :value="item.id" />
      </el-select>

      <el-button type="primary"
                 @click="loadData()">查询</el-button>

      <el-button type="warning"
                 @click="clearnSearch()">重置</el-button>
      <el-button type="success"
                 @click="addDialog = true">添加</el-button>
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->

        <el-table-column prop="nconMarName"
                         label="资料名"
                         width="150" />
        <el-table-column prop="project.projName"
                         label="项目"
                         width="100" />
        <el-table-column prop="nconType.nconTypeName"
                         label="资料类型"
                         width="100" />
        <el-table-column prop="fileDate"
                         label="文件日期"
                         width="100" />
        <el-table-column prop="nconMat"
                         label="内容事项"
                         width="100" />
        <el-table-column prop="depart.name"
                         label="部门"
                         width="100" />
        <el-table-column prop="remark"
                         label="备注"
                         width="100" />
        <el-table-column prop="user.userName"
                         label="录入人员"
                         width="100" />
        <el-table-column prop="nconPage"
                         label="资料页数"
                         width="100" />

        <el-table-column prop="fileCount"
                         label="文件数量"
                         width="100" />

        <!---------------------表单数据------------------------------->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small"
                       @click="openDetail(scope.row.id)">详情</el-button>
                       <el-button size="small"
                       @click="selectFile(scope.row.id)">上传文件</el-button>
            <el-button size="small"
                       @click="openEdit(scope.row.id)">修改</el-button>
            <el-button size="small"
                       @click="deleted(scope.row.id)"
                       type="danger">删除</el-button>
                       <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination style="margin-bottom: 20px"
                   background
                   layout="prev, pager, next"
                   :page-count="tableData.pages"
                   v-model:current-page="tableData.page"
                   @update:current-page="loadData" />
    <!--------------------------------组件------------------>

    <!------------------详情弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="detailDialog"
               title="详情"
               width="30%"
               :before-close="resetForm">
      <div>
        <div>
          非合同资料名 : {{ form.nconMarName }}
        </div>
        <div>
          项目id : {{ form.projId }}
        </div>
        <div>
          资料类型ID : {{ form.nconTypeId }}
        </div>
        <div>
          文件日期 : {{ form.fileDate }}
        </div>
        <div>
          内容事项 : {{ form.nconMat }}
        </div>
        <div>
          产生部门id : {{ form.initDeptId }}
        </div>
        <div>
          一般材料备注 : {{ form.remark }}
        </div>
        <div>
          录入人员id : {{ form.initUserId }}
        </div>
        <div>
          资料页数 : {{ form.nconPage }}
        </div>
        <div>
          创建时间 : {{ form.createTime }}
        </div>
        <div>
          更新时间 : {{ form.updataTime }}
        </div>
        <div>
          文件数量 : {{ form.fileCount }}
        </div>
        <div>
          完成状态0未完成 1完成 : {{ form.status }}
        </div>
      </div>
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="addDialog"
               title="新增"
               width="30%"
               :before-close="resetForm">
      <!--数据开始---->
      <el-form :model="form"
               label-width="120px">
        <el-form-item label="非合同资料名">
          <el-input v-model="form.nconMarName" />
        </el-form-item>

        <el-form-item label="项目">
          <el-select v-model="form.projId"
                     placeholder="项目"
                     style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in projectList"
                       :key="item.id"
                       :label="item.projName"
                       :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="资料类型">
          <el-select v-model="form.nconTypeId"
                     placeholder="资料类型"
                     style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in nconTypeList"
                       :key="item.id"
                       :label="item.nconTypeName"
                       :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="文件日期">
          <div class="block">

            <el-date-picker v-model="form.fileDate"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="Pick a date"
                            :default-value="new Date(2014, 1, 1)" />
          </div>

        </el-form-item>
        <el-form-item label="内容事项">
          <el-input v-model="form.nconMat" />
        </el-form-item>

        <el-form-item label="一般材料备注">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="上传人
        ">
          <el-select v-model="form.initUserId"
                     placeholder="用户"
                     style="width: 220px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in userList"
                       :key="item.id"
                       :label="item.userName +'---'+item.departName +'---'+item.departRole"
                       :value="item.id" />
          </el-select>

        </el-form-item>

        <el-form-item label="资料页数">
          <el-input v-model="form.nconPage" />
        </el-form-item>

        <!--数据截止---->
        <el-form-item>
          <el-button type="primary"
                     @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               v-model="editDialog"
               title="编辑"
               width="30%"
               :before-close="resetForm">
      <!--数据开始---->
      <el-form :model="form"
               label-width="120px">

        <el-form-item label="非合同资料名">
          <el-input v-model="form.nconMarName" />
        </el-form-item>

        <el-form-item label="项目">
          <el-select v-model="form.projId"
                     placeholder="项目"
                     style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in projectList"
                       :key="item.id"
                       :label="item.projName"
                       :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="资料类型">
          <el-select v-model="form.nconTypeId"
                     placeholder="资料类型"
                     style="width: 120px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in nconTypeList"
                       :key="item.id"
                       :label="item.nconTypeName"
                       :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="文件日期">
          <div class="block">

            <el-date-picker v-model="form.fileDate"
                            value-format="YYYY-MM-DD"
                            type="date"
                            placeholder="Pick a date"
                            :default-value="new Date(2014, 1, 1)" />
          </div>

        </el-form-item>
        <el-form-item label="内容事项">
          <el-input v-model="form.nconMat" />
        </el-form-item>

        <el-form-item label="一般材料备注">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="上传人
              ">
          <el-select v-model="form.initUserId"
                     placeholder="用户"
                     style="width: 220px; margin-right:30px; margin-left:10px">
            <el-option v-for="item in userList"
                       :key="item.id"
                       :label="item.userName +'---'+item.departName +'---'+item.departRole"
                       :value="item.id" />
          </el-select>

        </el-form-item>

        <el-form-item label="资料页数">
          <el-input v-model="form.nconPage" />
        </el-form-item>

        <!--数据截止---->
        <el-form-item>
          <el-button type="primary"
                     @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getProjectPage,
  updateProject,
  getProjectList,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";
import {
  getTree,
  getProUserList,
  doProUser,
  getProUserIds
} from "@/api/user";
import {
  getNconTypeList
} from "@/api/nconType";
import {
  uploadOneFile,
} from "@/api/file";
import {useRouter} from "vue-router";
const router = useRouter();
import {
  getNconMaterialPage,
  updateNconMaterial,
  deletedNconMaterial,
  addNconMaterial,
  getNconMaterialById
} from "@/api/nconMaterial";
import { useUserStore } from "@/stores/userStores";

const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});

const userList = ref([]);
const form = ref({
  id: '', //非合同资料id
  nconMarName: '', //非合同资料名
  projId: '', //项目id
  nconTypeId: '', //资料类型ID
  fileDate: '', //文件日期
  nconMat: '', //内容事项
  initDeptId: '', //产生部门id
  remark: '', //一般材料备注
  initUserId: '', //录入人员id
  nconPage: '', //资料页数
  createTime: '', //创建时间
  updataTime: '', //更新时间
  fileCount: '', //文件数量
  status: '', //完成状态0未完成 1完成
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

const projectList = ref([]);
const nconTypeList = ref([]);

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({
  //非合同资料id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //非合同资料名
  nconMarName: {
    key: 'ncon_mar_name',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目id
  projId: {
    key: 'proj_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //资料类型ID
  nconTypeId: {
    key: 'ncon_type_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //文件日期
  fileDate: {
    key: 'file_date',
    sqlKeyword: 'EQ',
    value: ''
  },
  //内容事项
  nconMat: {
    key: 'nconMat',
    sqlKeyword: 'EQ',
    value: ''
  },
  //产生部门id
  initDeptId: {
    key: 'initDeptId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //一般材料备注
  remark: {
    key: 'remark',
    sqlKeyword: 'EQ',
    value: ''
  },
  //录入人员id
  initUserId: {
    key: 'init_user_id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //资料页数
  nconPage: {
    key: 'nconPage',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //更新时间
  updataTime: {
    key: 'updataTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //文件数量
  fileCount: {
    key: 'fileCount',
    sqlKeyword: 'EQ',
    value: ''
  },
  //完成状态0未完成 1完成
  status: {
    key: 'status',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch () {
  searchData.value.id.value = '';
  searchData.value.nconMarName.value = '';
  searchData.value.projId.value = '';
  searchData.value.nconTypeId.value = '';
  searchData.value.fileDate.value = '';
  searchData.value.nconMat.value = '';
  searchData.value.initDeptId.value = '';
  searchData.value.remark.value = '';
  searchData.value.initUserId.value = '';
  searchData.value.nconPage.value = '';
  searchData.value.createTime.value = '';
  searchData.value.updataTime.value = '';
  searchData.value.fileCount.value = '';
  searchData.value.status.value = '';
  loadData();

}

// 文件相关
const fileInput = ref(null)

const file = ref(null)
const conId = ref(1);
const type = 2;
const selectFile = (id) => {
  conId.value = id;
  fileInput.value.click()     //点击按钮触发输入框选择文件

}

const handleFileChange = (e) => {    //当输入框选择文件后
  file.value = e.target.files[0]
  if (!file.value) return
  uploadFile(file)

}

const uploadFile = async (file) => {    //将输入框选择的文件和参数id一起添加进formData
  const formData = new FormData()
  formData.append('file', file.value) //file.value是上传的文件
  formData.append('noId', conId.value) //id是要携带的参数
  formData.append('type', type) //id是要携带的参数
  console.log("文件=>{}", formData)
  const res = await uploadOneFile(formData);
  if (res.code === 200) {
    ElMessage.success("上传成功");
    loadData();
  }
}


/**
 * 查看详情
 * */
const openDetail = async (id) => {

  router.push("/clerk/noFileDetail/"+id);

}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {

  const res = await getNconMaterialById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateNconMaterial(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addNconMaterial(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedNconMaterial({ id });
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};
const loadlProjectList = async () => {
  const res = await getProjectList();
  projectList.value = res.data;
}

const loadlnconType = async () => {
  const res = await getNconTypeList();
  nconTypeList.value = res.data;
}

const loaduserList = async () => {
  const resd = await getTree();
  userList.value = resd.data;
}
const loadData = async () => {
  loaduserList();
  loadlProjectList();
  loadlnconType();

  tableData.query = searchData.value;
  const res = await getNconMaterialPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};
onMounted(() => {

  // 初始加载分页数据
  loadData(tableData);

});
</script>

<style scoped>
.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}
</style>

